<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>单一迁移轨迹</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="mapv" src="./static/libs/include-cesium-local.js"></script>
  <!--引用示例页面样式表-->
  <link rel="stylesheet" href="./static/demo/cesium/style.css" />
</head>

<body>
  <div id="GlobeView"></div>
  <script>
    var webGlobe = new Cesium.WebSceneControl("GlobeView", {
      terrainExaggeration: 1,
    });
    var blueImage = new Cesium.UrlTemplateImageryProvider({
      url:
        "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
      tilingScheme: new Cesium.WebMercatorTilingScheme(),
      maximumLevel: 12,
    });
    webGlobe.viewer.imageryLayers.addImageryProvider(blueImage);
    var map = webGlobe.viewer;

    initMap();
    initMapv();

    function initMap() {
      var center = Cesium.Cartesian3.fromDegrees(114, 30, 5000000.0);
      map.scene.camera.setView({
        destination: center,
      });
    }

    function initMapv() {
      $.get("./static/data/mapv/china.json", function (geojson) {
        var geojsonOptions = {
          context: "2d",
          gradient: {
            0: "rgba(55, 50, 250, 0.4)",
            1: "rgba(55, 50, 250, 1)",
          },
          max: 354551,
          draw: "intensity",
        };

        var geojsonDataSet = mapv.geojson.getDataSet(geojson);

        var to = "北京";

        var qianxi = new mapv.DataSet([
          {
            from: "河北",
            count: 354551,
            to: to,
          },
          {
            from: "天津",
            count: 97323,
            to: to,
          },
          {
            from: "山东",
            count: 28664,
            to: to,
          },
          {
            from: "山西",
            count: 16650,
            to: to,
          },
          {
            from: "辽宁",
            count: 14379,
            to: to,
          },
          {
            from: "河南",
            count: 10980,
            to: to,
          },
          {
            from: "内蒙古",
            count: 9603,
            to: to,
          },
          {
            from: "江苏",
            count: 4536,
            to: to,
          },
          {
            from: "上海",
            count: 3556,
            to: to,
          },
          {
            from: "广东",
            count: 2600,
            to: to,
          },
        ]);

        var qianxiData = qianxi.get();

        var lineData = [];
        var pointData = [];
        var textData = [];
        var timeData = [];

        var citys = {};

        for (var i = 0; i < qianxiData.length; i++) {
          var fromCenter = mapv.utilCityCenter.getCenterByCityName(
            qianxiData[i].from
          );
          var toCenter = mapv.utilCityCenter.getCenterByCityName(
            qianxiData[i].to
          );
          if (!fromCenter || !toCenter) {
            continue;
          }
          citys[qianxiData[i].from] = qianxiData[i].count;
          citys[qianxiData[i].to] = 100;
          pointData.push({
            geometry: {
              type: "Point",
              coordinates: [fromCenter.lng, fromCenter.lat],
            },
          });
          pointData.push({
            geometry: {
              type: "Point",
              coordinates: [toCenter.lng, toCenter.lat],
            },
          });
          textData.push({
            geometry: {
              type: "Point",
              coordinates: [fromCenter.lng, fromCenter.lat],
            },
            text: qianxiData[i].from,
          });
          textData.push({
            geometry: {
              type: "Point",
              coordinates: [toCenter.lng, toCenter.lat],
            },
            text: qianxiData[i].to,
          });

          var curve = mapv.utilCurve.getPoints([fromCenter, toCenter]);

          for (j = 0; j < curve.length; j++) {
            timeData.push({
              geometry: {
                type: "Point",
                coordinates: curve[j],
              },
              count: 1,
              time: j,
            });
          }

          lineData.push({
            geometry: {
              type: "LineString",
              coordinates: curve,
              //coordinates: [[fromCenter.lng, fromCenter.lat], [toCenter.lng, toCenter.lat]]
            },
            count: 30 * Math.random(),
          });
        }

        var data = geojsonDataSet.get({
          filter: function (item) {
            if (!citys[item.name]) {
              return false;
            }

            item.count = citys[item.name];
            return true;
          },
        });
        geojsonDataSet = new mapv.DataSet(data);
        // 声明cesium的mapv图层并将其显示到三维球上
        var mapv1 = new CesiumZondy.Overlayer.MapvLayer(
          map,
          geojsonDataSet,
          geojsonOptions
        );
        // 构建对应的dataset
        var textDataSet = new mapv.DataSet(textData);
        // 设置对应的参数
        // https://github.com/huiyan-fe/mapv/blob/master/API.md
        var textOptions = {
          context: "2d", //cesium必须设置画布为2d
          draw: "text",
          font: "14px Arial",
          fillStyle: "white",
          shadowColor: "yellow",
          shadowBlue: 10,
          zIndex: 11,
          shadowBlur: 10,
        };
        // 声明cesium的mapv图层并将其显示到三维球上
        var mapv2 = new CesiumZondy.Overlayer.MapvLayer(map, textDataSet, textOptions);

        var lineDataSet = new mapv.DataSet(lineData);
        // https://github.com/huiyan-fe/mapv/blob/master/API.md
        var lineOptions = {
          context: "2d", //cesium必须设置画布为2d
          strokeStyle: "rgba(255, 250, 50, 0.8)",
          shadowColor: "rgba(255, 250, 50, 1)",
          shadowBlur: 20,
          lineWidth: 2,
          zIndex: 100,
          draw: "simple",
        };
        // 声明cesium的mapv图层并将其显示到三维球上
        var mapv3 = new CesiumZondy.Overlayer.MapvLayer(map, lineDataSet, lineOptions);
        // https://github.com/huiyan-fe/mapv/blob/master/API.md
        var pointOptions = {
          context: "2d", //cesium必须设置画布为2d
          fillStyle: "rgba(254,175,3,0.7)",
          shadowColor: "rgba(55, 50, 250, 0.5)",
          shadowBlur: 10,
          size: 5,
          zIndex: 10,
          draw: "simple",
        };

        var pointDataSet = new mapv.DataSet(pointData);
        // 声明cesium的mapv图层并将其显示到三维球上
        var mapv4 = new CesiumZondy.Overlayer.MapvLayer(map, pointDataSet, pointOptions);

        var timeDataSet = new mapv.DataSet(timeData);

        // https://github.com/huiyan-fe/mapv/blob/master/API.md
        var timeOptions = {
          context: "2d", //cesium必须设置画布为2d
          fillStyle: "rgba(255, 250, 250, 0.5)",
          zIndex: 200,
          size: 2.5,
          animation: {
            type: "time",
            stepsRange: {
              start: 0,
              end: 50,
            },
            trails: 10,
            duration: 2,
          },
          draw: "simple",
        };
        // 声明cesium的mapv图层并将其显示到三维球上
        var mapv5 = new CesiumZondy.Overlayer.MapvLayer(map, timeDataSet, timeOptions);
      });
    }
  </script>
</body>

</html>